<template>
  <div class="dy-main BringForwardDetail">
    <div class="dy-header">
      <x-header :right-options="{showMore: true}" :left-options="{preventGoBack: true,backText: ''}" @on-click-back="back" @on-click-more="showMenus = true">转账详情</x-header>
    </div>
    <div class="dy-body">
      <p>{{success}}</p>
      <div class="xianshi">
        <div class="name">
          <h2>{{requestData.payeeName}}</h2>
          <span>{{requestData.tranAmt}}</span>
        </div>
        <p>{{requestData.bankName}}[{{requestData.cardNoForth}}]</p>
      </div>
      <group label-width="1.9rem" title="" gutter="0">
        <cell title="交易流水号" :value="requestData.tradeNumber"></cell>
        <cell title="付款账号" :value="requestData.payeeNo"></cell>
        <cell title="交易时间" :value="requestData.tradeTime"></cell>
        <cell title="交易类型" :value="requestData.tradeType"></cell>
        <cell title="转账用途" :value="requestData.bringUse"></cell>
        <cell title="附言" :value="requestData.fuyan"></cell>
      </group>
      <flexbox>
          <flexbox-item><div class="financial-result-button indexbutton" @click="over">撤销交易</div></flexbox-item>
          <flexbox-item><div class="financial-result-button" @click="goBack">再次转账</div></flexbox-item>
      </flexbox>
      <toast v-model="showPositionValue" type="text" width="6rem" :time="800" is-show-mask :text="errormsg" position="middle">{{ errormsg }}</toast>
      <div class="wxts">
        温馨提示
      </div>
      <div class="wxtscontent">
        此页说明转帐交易受理成功，不代表资金已转入收款账户，不
        作为收付方交易确认的最终依据。交易结果请以收款账户实际
        入账为准
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable camelcase */
export default {
  data () {
    return {
      showPositionValue: false,
      errormsg: '',
      requestData: {
        bankName: '东亚', // 银行名称
        cardNo: '', // 转出卡号
        payeeName: 'ee', // 收款人姓名
        payeeNo: '', // 收款人账号
        tranAmt: '', // 转账金额
        cardNoForth: '0123', // 最后四位数
        tradeTime: '',
        tradeType: '', // 交易类型
        bringUse: '还款',
        fuyan: '222',
        tradeNumber: '20180430387657',
        oriTranSerial: '' // 交易流水号
      },
      success: '1',
      clickOne: false // 防重点击
    }
  },
  methods: {
    over: function () {
      if (this.clickOne) return true
      this.clickOne = true
      this.refreshTest()
    },
    goBack: function () {
      this.$router.push({name: 'BringForwardTranDetail'})
    },
    back () {
      this.$publicFun.goBack(this)
    },
    refreshTest: function () {
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({'requstSource': 'internetRequest', 'url': 'mstep.do?act=business', 'params': {'method_Name': 'TransferRevocation', 'basic_Data': JSON.stringify({'oriTranSerial': this.requestData.oriTranSerial, 'oriTranDate': this.requestData.tradeTime})}}),
        (response) => {
          // this.success = response
          let rep = JSON.parse(response).data
          if (rep.head.respCode === '000000') {
            this.showPositionValue = true
            this.errormsg = '转账撤销申请成功'
          } else {
            this.showPositionValue = true
            this.errormsg = '转账撤销申请失败'
          }
          this.clickOne = false
        }
      )
    }
  },
  mounted: function () {
    this.requestData.payeeNo = this.$route.query.payeeNo
    this.requestData.payeeName = this.$route.query.payeeName
    this.requestData.tradeTime = this.$route.query.tradeTime
    this.requestData.tranAmt = this.$route.query.tranAmt
    this.requestData.tradeType = this.$route.query.tranType
    this.requestData.oriTranSerial = this.$route.oriTranSerial
  }
}
</script>

<style lang='less'>
.BringForwardDetail{
  .xianshi {
    height:1.77rem;
    background:rgba(51,51,102,1);
    .name {
      padding:.49rem .3rem 0 .3rem;
      display:flex;
      h2 {
        font-size:0.4rem;
        font-family:PingFang-SC-Bold;
        color:rgba(255,255,255,1);
        flex:1;
      }
      span {
        width:.78rem;
        font-size:0.3rem;
        font-family:PingFang-SC-Bold;
        color:rgba(255,102,51,1);
      }
    }
    p {
      margin:.1rem 0 0 .3rem;
      font-size:0.28rem;
      font-family:PingFang-SC-Regular;
      color:rgba(255,255,255,1);
    }
  }
  .result-item-left{
    width:30%;
    float: left;
    color:rgba(153,153,153,1);
  }
  .result-item-right{
    display:inline-block;
    text-align: right;
    width:70%;
    color:rgba(51,51,51,1);
  }
  .financial-result-button{
    width: 3rem;
    height: .88rem;
    margin: .3rem auto 0;
    line-height: .88rem;
    font-size: .34rem;
    color: #FFF;
    text-align: center;
    background: #EC1B30;
    border-radius: 0.06rem;
  }
  .indexbutton {
    background: #FFF;
    color: #EC1B30;
    border:1px solid #EC1B30;
  }
  .wxts {
    font-size:0.26rem;
    font-family:PingFang-SC-Regular;
    color:rgba(153,153,153,1);
    margin:.4rem 0 0 .24rem;
  }
  .wxtscontent {
    font-size:0.26rem;
    font-family:PingFang-SC-Regular;
    color:rgba(153,153,153,1);
    margin:.27rem 0 0 .24rem;
  }

}
</style>
